<template>
  <div class="base-info">
    <h3 class="title">基础信息</h3>
    <el-form :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12"> 
          <div class="content1">
            <div>
                <h4>土地面积<span class="mast">*</span></h4>
            </div>
            <div class="tdmj">
                <el-input class="no-border" v-model="form.landArea" placeholder="请输入土地面积" />
                <span class="unit">亩</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
            <div class="content1">
                <div>
                    <h4>土壤类型<span class="mast">*</span></h4>
                </div>
                <div>
                    <el-select v-model="form.soilType" placeholder="请选择土壤类型">
                      <el-option
                        v-for="item in soilTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </div>
            </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
            <div class="content2">
                <div>
                    <h4>土地位置<span class="mast">*</span></h4>
                </div>
                <div>
                    <el-cascader
                    style="width: 100%;"
                      v-model="form.landLocation"
                      :options="locationOptions"
                      placeholder="请选择省份/城市/区县"
                    />
                    <el-input
                      v-model="form.detailAddress"
                      placeholder="请输入详细地址"
                      style="margin-top: 10px"
                    />
                </div>
            </div>
            
        </el-col>
        <el-col :span="12">
            <div class="content2">
                <div>
                    <h4>负责人<span class="mast">*</span></h4>
                </div>
                <div>
                    <el-input v-model="form.responsiblePerson" placeholder="请输入负责人" />
                    <el-input
                        class="lxphone"
                      v-model="form.phone"
                      placeholder="请输入负责人联系电话"
                      prefix-icon="el-icon-phone"
                    />
                </div>
            </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        landArea: '',
        soilType: '',
        landLocation: [],
        detailAddress: '',
        responsiblePerson: '',
        phone: ''
      },
      soilTypeOptions: [
        { label: '类型1', value: 'type1' },
        { label: '类型2', value: 'type2' }
      ],
      locationOptions: [
        {
          value: 'shandong',
          label: '山东',
          children: [
            {
              value: 'heze',
              label: '菏泽',
              children: [
                { value: 'caoxian', label: '曹县' },
                { value: 'yuncheng', label: '郓城' },
                { value: 'juye', label: '巨野' }
              ]
            },
            {
              value: 'liaocheng',
              label: '聊城',
              children: [
                { value: 'guanxian', label: '冠县' },
                { value: 'yanggu', label: '阳谷' }
              ]
            }
          ]
        },
        {
          value: 'henan',
          label: '河南',
          children: [
            {
              value: 'zhengzhou',
              label: '郑州',
              children: [
                { value: 'hah', label: '哈哈' },
                { value: 'yiyi', label: '一亿' },
                { value: 'aaa', label: '啊啊啊' }
              ]
            }
          ]
        }
      ]
    }
  },
}
</script>

<style scoped>

.mast{
    color: red;
}
.base-info {
    padding: 20px;
    box-shadow: #c0bfbf93 5px 5px 10px;
    border-radius: 20px;
    background-color: #ffffff;
}
h4{
    text-align: left;
    margin: 10px;
    font-size: 20px;
    font-weight: 500;
    color: #797878;
}
.lxphone{
    margin: 10px 0;
}
.title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 23px;
    font-weight: bold;
}
:deep(.no-border .el-input__wrapper) {
  border: none;
  box-shadow: none;
}
:deep(.no-border .el-input__wrapper:hover) {
  border: none;
  box-shadow: none;
}
.tdmj{
    border: 1px #dcdfe6 solid;
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.unit {
  margin-right: 8px;
  color: #999;
}
.el-form-item {
  margin-bottom: 16px;
}
</style>